<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/handerAndFooter.css">
    <style>
    </style>
</head>
<body>
<!--***************头部********************-->
<div>
    <el-container>
        <el-header style="padding: 0;height:auto ">
            <div id="header-navbar"> 地平线8号 尽管出发 创造不凡</div>
            <!--        ************************************-->

            <div class="header222" style="overflow:hidden;margin: 0 auto;padding-top:15px;width: 80%">
                <div style=" width:20%;float: left;overflow:hidden; padding-top: 30px">
                    <img src="./images/logo.png" alt=""
                         style="float: left;margin-left:40px;padding-bottom:15px;width: 120px">
                </div>
                <div style="float: left ;
                     vertical-align: bottom;
                      width: 50%;
                     padding-left: 20px">
                    <el-menu :default-active="activeIndex"
                             text-color="#000"
                             mode="horizontal"
                             @select="handleSelect"
                             active-text-color="#ffd04b">

                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="1">商城</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="2">周边</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="3">MEDIA
                        </el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="7">品牌</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="5">服务</el-menu-item>
                        <el-menu-item style="font-size: 12px;width: 15%;text-align: center" index="6">会员中心
                        </el-menu-item>
                        <!--        <el-menu-item index="3" disabled>消息中心</el-menu-item>-->
                    </el-menu>
                    <div class="line" style=""></div>
                </div>

            </div>

        </el-header>
        <el-main>
          <div style="height: 400px"></div>
        </el-main>


        <el-footer>
            <div id="footer" style="height: auto">
                <div id="footer-content">
                    <div id="footer-content-left">
                        <div id="footer-search" style="">
                            <input placeholder="搜索关键词">
                            <div>
                                <img src="./images/face-right-white.png">
                            </div>
                        </div>
                        <div id="footer-follow">
                            <span>FOLLOW US</span>

                            <a target="_blank" href=" https://weibo.com/level8official"><img
                                    src="./images/footer_icon_1.png"></a>
                            <!-- <a target="_blank" href=""><img src="/static/images/footer_icon_2.png"/></a> -->
                            <a target="_blank" href="https://www.instagram.com/level8_official/"><img
                                    src="./images/footer_icon_3.png"></a>
                            <a target="_blank" href="https://www.facebook.com/pg/Level8Group/shopify"><img
                                    src="./images/footer_icon_4.png"></a>
                            <a target="_blank"
                               href="https://space.bilibili.com/349904854?from=search&amp;seid=16496169767152971469&amp;spm_id_from=333.337.0.0"><img
                                    src="./images/footer_icon_5.png"></a>
                            <a target="_blank"
                               href="https://www.xiaohongshu.com/vipUser/profile/5c982e85000000001000bbd4?xhsshare=CopyLink&amp;appuid=5c0544836b58b714620b8753&amp;apptime=1636529051"><img
                                    src="./images/footer_icon_6.png"></a>
                        </div>
                    </div>
                    <div id="footer-content-right">
                        <div class="footer-code-item" style="border-right: 1px dashed #000;">
                            <div class="footer-code">
                                <img src="./images/footer_code1.png">
                            </div>
                            <div>绑定产品</div>
                        </div>
                        <div class="footer-code-item " style="border-right: 1px dashed #000;">
                            <div class="footer-code">
                                <img src="./images/footer_code2.png">
                            </div>
                            <div>关注公众号</div>
                        </div>
                        <div class="footer-code-item paddingR0">
                            <div class="footer-code">
                                <img src="./images/footer_code3.png">
                            </div>
                            <div>关注抖音</div>
                        </div>
                    </div>
                </div>
                <div id="footer-bottom">
                    <div id="footer-bottom-right">
                        <div style="margin-right: 20px;">© Copyright Level 8 2017</div>
                        <div>level8@level8cases.com</div>
                    </div>
                </div>
                <div class="gmt-footer-bottom">
                    <!-- class="container" -->
                    <div>版权所有 ©2021 &nbsp;&nbsp;公司名：厦门远行客智能科技有限公司
                        <a style="margin-left:10px;color: #000;" href="http://beian.miit.gov.cn">闽ICP备20000451号</a>
                    </div>
                </div>
            </div>
        </el-footer>
    </el-container>
    <div class="line"></div>
</div>
<!--*************************************尾部*************************-->
</div>
</body>
</html>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: function () {
            return {
                visible: false,
                activeIndex: '1',
                activeIndex2: '1',
            }
        },


        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClick(tab, event) {
                console.log(tab, event);

            }
        },


    })

</script>
